<template>
  <div class="LoginContainer">
    <div class="Top">
      <div class="header">
        <div>
          <img src="~@/assets/Logo1.png" alt="">
          <p>中国领先互联网学车服务平台</p>
        </div>
        <div>
          <p>快速认证热线：</p>
          <span>400-115-6686</span>
          <el-tooltip content="教练入住须知，流程" placement="bottom" effect="light">
            <router-link to="/apply" style="margin: 0 10px 0 10px"><h3>教练入住</h3></router-link>
          </el-tooltip>
          <el-tooltip content="后台管理系统" placement="bottom" effect="light">
            <router-link to="/adminlogin" style="margin: 0 10px 0 10px"><h3>登入后台</h3></router-link>
          </el-tooltip>
        </div>
      </div>
      <div class="dh" >
        <div >
          <ul>
            <li><router-link to='/index'>首页</router-link></li>
            <li v-if="LoginType === '学员'"><router-link to='/findcoach'>找教练</router-link></li>
            <li v-if="LoginType === '教练'"><router-link to='/carstudent'>学员状态</router-link></li>
            <li v-if="LoginType === '学员'"><router-link to='/carpractises'>练车预约</router-link></li>
            <li v-if="LoginType === '教练'"><router-link to='/carpractise'>负责场地</router-link></li>
            <li v-if="LoginType === '学员'"><router-link to='/carexam'>考试预约</router-link></li>
            <li v-if="LoginType === '教练'"><router-link to='/examstatus'>考场状态</router-link></li>
            <li v-if="LoginType === '学员'"><router-link to='/mystatus'>我的状态</router-link></li>
            <li v-if="token1"><router-link to='/fourmm'>论坛</router-link></li>
          </ul>
        </div>
        <div>
          <el-avatar
              :src=src
              shape="square"
              class="avatar"
              style="font-size: 17px"
              @click="handleLogin"
          >{{xxxx}}</el-avatar>
        </div>
      </div>
    </div>
    <div class="Bottom">
      <router-view :JudgeType="JudgeType"/>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import router from "@/router";
import {useStore} from "vuex";
import {getTeacherById} from "@/api/teacher";
import {getStudentById} from "@/api/student";
import {ElNotification} from "element-plus";

const store = useStore()
const LoginType = store.getters.Type
const LoginId = store.getters.Id
const token1 = store.getters.token
const xxxx = ref('登录')


//初始化
const mtype=ref('3')
const src=ref('')

const JudgeType = async () =>{
  if (LoginType === '教练'){
    await getTeacherById(LoginId).then(res=>{
      src.value = res.data.img
      xxxx.value = ''
      if (res.data.place){

      }else {
        ElNotification({
          title: 'Info',
          dangerouslyUseHTMLString: true,
          message: '<span style="color: #505050;font-weight: 600">请尽快选择负责场地，以便学员的选择</span>',
          type: 'info',
        })
      }

    })
  }else if (LoginType === '学员'){
    await getStudentById(LoginId).then(res=>{
      src.value = res.data.img
      xxxx.value = ''
    })
  }else{
    src.value = ''
  }
}
JudgeType()
// 获取当前时间
const UpData=()=>{
  const nowDate = new Date();
  const date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate(),
  }
  const newmonth = date.month>10?date.month:'0'+date.month
  const day = date.date>10?date.date:'0'+date.date
  return  date.year + '-' + newmonth + '-' + day
}

const handleLogin = () =>{
  if (LoginType){
    router.replace('/information')
  }else {
    router.replace('/login')
  }
}


</script>

<style scoped>
/*登录模块*/
.LoginContainer{
  width: 100vw;
  height: 100vh;
  display: flex;
  min-width: 900px;
  flex-direction: column;
  /*border: 1px solid blue;*/
}
.Top{
  width: 100%;
  flex: 0.15;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border-bottom: 1px solid #c2c2c2;
}
.avatar{
  margin-right: 10px;
  border: 1px solid #d5d5d5;
  transition: all 0.2s;
}
.avatar:hover{
  transform: scale(1.1);
}
.header{
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #c3c3fa;
}
.header div{
  display: flex;
  flex-direction: row;
  align-items: center;
  /*border: 1px solid blue*/
}
.dh{
  flex: 1;
  display: flex;
  min-height: 20px;
  font-size: 17px;
  overflow: hidden;
  flex-direction: row;
}
.dh div:first-child{
  flex: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  /*border: 1px solid red;*/
}
.dh div:last-child{
  flex: 0.2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.dh ul{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style-type:none;
  /*border: 1px solid red;*/

}
.dh ul li{
  /*float: left;*/
  font-family: 方正粗黑宋简体, serif;
  opacity: 0.7;
  white-space:nowrap;
  /*margin: 0 50px 0 50px;*/
  transition: color 0.2s;
  /*border: 1px solid black;*/

}
.dh ul li:hover{
  color: #4da9ff;
}

.Top div img{
  margin: 0 10% 0 10%;
  font-size: 20px;
  width: 25%;
}
.Top div p{
  font-size: 18px;
  white-space:nowrap;
  opacity: 0.6;
}
.Top div span{
  color: #0a53be;
  font-size: 25px;
}
.Top div h3{
  opacity: 0.5;
  font-size: 17px;
  white-space:nowrap;
  transition: all 0.2s;
}
.Top div h3:hover{
  opacity: 0.8;
}

.Bottom{
  width: 100%;
  flex: 0.85;
  display: flex;
  flex-direction: row;
  overflow: auto;
  justify-content: center;
  background-image: url("~@/assets/login-banner.jpg");
}

</style>